Grid of Boxes

Float boxes side by side:

Some text inside the box.

Some text inside the box.

Some text inside the box.

Note: Here, we use the clearfix hack to take care of the layout flow. We also use the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this code to see the effect.

Images Side by Side

Float images side by side:

Italy
Forest
Mountains

Note that we also use the clearfix hack to take care of the layout flow, and that we add the box-sizing property to make sure that the image container doesn't break due to extra padding. Try to remove this code to see the effect.

Equal Height Boxes

Floating boxes with equal heights:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

This example not very flexible. It is ok to use CSS height if you can guarantee that the boxes will always have the same amount of content in them, but that's not always the case. If you try the example above on a mobile phone (or resize the browser window), you will see that the second box's content will be displayed outside of the box.

Go back to the tutorial and find another solution, if this is not what you want.

Flexible Boxes

Box 1 - This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.
Box 2 - My height will follow Box 1.

Try to resize the browser window to see the flexible layout.